import 'package:flutter/material.dart';
import 'package:regular_assess/helper/utils/util.dart';

class LoginField extends StatefulWidget {
  const LoginField({
    Key? key,
    required this.controller,
    required this.title,
    this.placeholder,
    this.isPwd = false,
    this.padding = EdgeInsets.zero,
    this.errText,
    this.onChange,
    this.titleColor,
  }) : super(key: key);
  final TextEditingController controller;
  final String title;
  final String? placeholder;
  final bool isPwd;
  final EdgeInsets padding;
  final String? errText;
  final Function(String)? onChange;
  final Color? titleColor;
  @override
  State<LoginField> createState() => _LoginFieldState();
}

class _LoginFieldState extends State<LoginField> {
  bool isEditing = false;
  bool isObscureText = true;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: widget.padding,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            widget.title,
            style: TextStyle(
                color: widget.titleColor ?? const Color(0xff333333),
                fontSize: 15.sp),
          ),
          SizedBox(
            height: 8.r,
          ),
          TextField(
            controller: widget.controller,
            scrollPadding: EdgeInsets.zero,
            maxLines: 1,
            textAlignVertical: TextAlignVertical.center,
            obscureText: widget.isPwd && isObscureText,
            onTap: () {
              if (widget.onChange != null) {
                widget.onChange!('');
              }
            },
            onChanged: (value) {
              var isNotEmpty = widget.controller.text.isNotEmpty;
              if (isEditing != isNotEmpty) {
                isEditing = isNotEmpty;
                setState(() {});
              }
              if (widget.onChange != null) {
                widget.onChange!(value);
              }
            },
            decoration: InputDecoration(
              errorText: widget.errText,
              hintText: widget.placeholder,
              hintStyle: TextStyle(
                color: const Color(0xffdddddd),
                fontSize: 14.sp,
              ),
              labelStyle:
                  TextStyle(color: const Color(0xff333333), fontSize: 14.sp),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: BorderSide.none,
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: const BorderSide(color: Colors.blue, width: 0.5),
              ),
              errorBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: const BorderSide(color: Colors.red, width: 0.5),
              ),
              fillColor: const Color(0xfffafafa),
              filled: true,
              isCollapsed: true,
              contentPadding: EdgeInsets.symmetric(
                horizontal: 10.r,
              ),
              suffixIcon: !isEditing
                  ? SizedBox(
                      height: 44.r,
                    )
                  : InkWell(
                      onTap: () {
                        if (widget.isPwd) {
                          setState(() {
                            isObscureText = !isObscureText;
                          });
                        } else {
                          widget.controller.clear();

                          setState(() {
                            isEditing = false;
                          });
                        }
                      },
                      child: Container(
                        width: 44.r,
                        height: 44.r,
                        padding: EdgeInsets.only(right: 10.r),
                        alignment: Alignment.centerRight,
                        child: Icon(
                          widget.isPwd
                              ? (isObscureText
                                  ? IconUtil.eye_close
                                  : Icons.remove_red_eye)
                              : Icons.close,
                          color: const Color(0xff999999),
                          size: 25.r,
                        ),
                      )),
            ),
          ),
        ],
      ),
    );
  }
}

// class LoginField extends StatelessWidget {
//   const LoginField({
//     Key? key,
//     required this.controller,
//     required this.title,
//     this.placeholder,
//     this.isPwd = false,
//     this.padding = EdgeInsets.zero,
//   }) : super(key: key);
//   final TextEditingController controller;
//   final String title;
//   final String? placeholder;
//   final bool isPwd;
//   final EdgeInsets padding;
//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       padding: padding,
//       child: Column(
//         crossAxisAlignment: CrossAxisAlignment.start,
//         children: [
//           Text(
//             title,
//             style: TextStyle(color: const Color(0xff333333), fontSize: 14.sp),
//           ),
//           SizedBox(
//             height: 8.r,
//           ),
//           SizedBox(
//             height: 44.r,
//             child: TextField(
//               controller: controller,
//               scrollPadding: EdgeInsets.zero,
//               maxLines: 1,
//               textAlignVertical: TextAlignVertical.center,
//               decoration: InputDecoration(
//                 helperText: placeholder,
//                 helperStyle: TextStyle(
//                   color: const Color(0xffdddddd),
//                   fontSize: 12.sp,
//                 ),
//                 labelStyle:
//                     TextStyle(color: const Color(0xff333333), fontSize: 12.sp),
//                 border: OutlineInputBorder(
//                   borderRadius: BorderRadius.circular(10),
//                   borderSide: BorderSide.none,
//                 ),
//                 focusedBorder: OutlineInputBorder(
//                   borderRadius: BorderRadius.circular(10),
//                   borderSide: const BorderSide(color: Colors.blue, width: 0.5),
//                 ),
//                 errorBorder: OutlineInputBorder(
//                   borderRadius: BorderRadius.circular(10),
//                   borderSide: const BorderSide(color: Colors.red, width: 0.5),
//                 ),
//                 fillColor: const Color(0xfffafafa),
//                 filled: true,
//                 isCollapsed: true,

//                 // isDense: true,
//                 contentPadding: EdgeInsets.symmetric(
//                   horizontal: 10.r,
//                   // vertical: 13.r,
//                 ),
//                 suffixIcon: controller.text.isEmpty
//                     ? null
//                     : InkWell(
//                         onTap: () {
//                           controller.clear();
//                         },
//                         child: Container(
//                           width: 44.r,
//                           height: 44.r,
//                           padding: EdgeInsets.only(right: 10.r),
//                           alignment: Alignment.centerRight,
//                           child: Icon(
//                             Icons.close,
//                             color: const Color(0xff999999),
//                             size: 25.r,
//                           ),
//                         )),
//               ),
//             ),
//           ),
//         ],
//       ),
//     );
//   }
// }
